import React, { Component } from "react";
import { Card, Select, Input, Table, Button, message } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import LinkButton from "../../components/link-button";
import {
  reqProducts,
  reqSearchProducts,
  reqUpdateStatus,
} from "../../api/index";
import { PAGE_SIZE } from "../../utils/constant";

const Option = Select.Option;
export default class ProductHome extends Component {
  state = {
    total: 0, //商品总数量
    products: [], //商品数组
    loading: false, //是否在加载
    searchName: "", //搜索关键字
    searchType: "productName", //根据哪个字段搜
  };

  //获取指定页码的列表数据
  getProducts = async (pageNum) => {
    this.pageNum = pageNum; //保存页码
    this.setState({ loading: true }); //显示loading
    const { searchName, searchType } = this.state;
    let result;
    if (searchName) {
      result = await reqSearchProducts(
        pageNum,
        PAGE_SIZE,
        searchName,
        searchType
      );
    } else {
      result = await reqProducts(pageNum, PAGE_SIZE);
    }
    this.setState({ loading: false }); //关闭loading
    console.log("111", result.data);
    if (result.data.status === 0) {
      console.log(result.data.data);
      //取出分页数据，更新状态
      const { total, records } = result.data.data;
      console.log(result.data);
      this.setState({ total, products: records });
    }
  };
  updateStatus = async (productId, status) => {
    const result = await reqUpdateStatus(productId, status);
    console.log("hyuting", result.data);
    if (result.data.status === 0) {
      message.success("更新商品成功");
      this.getProducts(this.pageNum);
    }
  };
  componentDidMount() {
    this.getProducts(1);
  }

  render() {
    // console.log("111", this.props.history);
    //取出状态显示
    const { products, total, loading, searchName, searchType } = this.state;
    const title = (
      <sapn>
        <Select
          style={{ width: 130 }}
          value={searchType}
          onChange={(value) => this.setState({ searchType: value })}
        >
          <Option value="productName">按名称搜索</Option>
          <Option value="productDesc">按描述搜索</Option>
        </Select>
        <Input
          placeholder="关键字"
          style={{ width: 150, margin: "0 15px" }}
          value={searchName}
          onChange={(event) =>
            this.setState({ searchName: event.target.value })
          }
        />
        <Button type="primary" onClick={() => this.getProducts(1)}>
          搜索
        </Button>
      </sapn>
    );
    const extra = (
      <Button
        type="primary"
        onClick={() => this.props.history.push("/product/addupdate")}
      >
        <PlusOutlined />
        添加商品
      </Button>
    );

    const columns = [
      {
        title: "商品名称",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "商品描述",
        dataIndex: "descp",
        key: "descp",
      },
      {
        title: "价格",
        dataIndex: "price",
        key: "price",
        render: (price) => "￥" + price,
      },
      {
        width: 100,
        title: "状态",
        //dataIndex: "status",
        render: (product) => {
          const { status, id } = product;
          console.log("wxfhyt", product);
          return (
            <span>
              <Button
                type="primary"
                onClick={() =>
                  this.updateStatus(id, status === "1" ? "2" : "1")
                }
              >
                {status === "1" ? "下架" : "上架"}
              </Button>
              <span>{status === "1" ? "在售" : "已下架"}</span>
            </span>
          );
        },
      },
      {
        width: 100,
        title: "操作",
        key: "price1",
        render: (product) => {
          return (
            <span>
              <LinkButton
                onClick={() =>
                  this.props.history.push("/product/detail", { product })
                }
                // product对象传到对应路由地址组件中
              >
                详情
              </LinkButton>
              <LinkButton
                onClick={() =>
                  this.props.history.push("/product/addupdate", product)
                }
              >
                修改
              </LinkButton>
            </span>
          );
        },
      },
    ];

    return (
      <Card title={title} extra={extra}>
        <Table
          loading={loading}
          dataSource={products}
          columns={columns}
          bordered
          pagination={{
            current: this.pageNum,
            total,
            defaultPageSize: PAGE_SIZE,
            showQuickJumper: true,
            onChange: (pageNum) => {
              this.getProducts(pageNum);
            },
          }}
        />
      </Card>
    );
  }
}
